<template>
    <div class="">
        <div>
            <!-- 查询类型选择 -->
            <el-radio-group v-model="dataType">
                <el-radio-button :label="1">支出管理</el-radio-button>
                <el-radio-button :label="2">收款管理</el-radio-button>
            </el-radio-group>

            <!-- 选择状态 -->
            <div class="type-state e-m-t-20 e-m-b-30">
                <span v-for="(item, index) in stateList" :key="index" :class="{ 'on': stateValue === item.value }" @click="stateValue = item.value">
                    {{ item.name }}
                </span>
            </div>

            <!-- 更多筛选条件 -->
            <div class="other-search-form is-active e-m-t-20">
                <el-form class="e-flex-1" label-position="left" label-width="auto" :inline="true" size="small">
                    <div class="flex align-items-center">
                        <el-form-item label="时间筛选" class="e-m-r-10">
                            <el-radio-group v-model="timeType" @input="getList(true)">
                                <el-radio-button label="0">全部</el-radio-button>
                                <el-radio-button label="1">今日</el-radio-button>
                                <el-radio-button label="2">昨日</el-radio-button>
                                <el-radio-button label="3">本月</el-radio-button>
                                <el-radio-button label="4">上月</el-radio-button>
                                <el-radio-button label="5">本季度</el-radio-button>
                                <el-radio-button label="6">上季度</el-radio-button>
                                <el-radio-button label="7">本年</el-radio-button>
                                <el-radio-button label="8">上年</el-radio-button>
                                <el-radio-button label="9">自定义日期</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="" v-if="timeType == 9">
                            <el-date-picker v-model="timeValue" @change="changeTime" :clearable="false" value-format="yyyy-MM-dd" type="daterange"
                                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" clearable>
                            </el-date-picker>
                        </el-form-item>
                    </div>
                    <el-form-item label="按订单号搜索">
                        <el-input placeholder="按订单号搜索" prefix-icon="el-icon-search" v-model="key2" clearable @clear="getList(true,true)" @input="$throttle(getList(true,true), 3000)"></el-input>
                    </el-form-item>

                    <el-form-item label="处理人">
                        <el-select 
                            v-model="staffId" 
                            placeholder="请选择"
                            filterable
                            remote
                            clearable
                            @change="getList"
                            @clear="getUsersList"
                            :remote-method="getUsersList"
                            :loading="loading">
                            <el-option
                                v-for="item in staffList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>

            <div class="e-m-b-20">
                <el-button type="primary" @click="startPayment">合并支付</el-button>
                <el-button type="primary" @click="download" plain><i class="iconfont icon-excel e-font-14 e-m-r-5"></i>导出Excel</el-button>
            </div>
            <!-- 自定义表格 -->
            <custom-table
                :table-data="ListUnpaidData"
                :columns="tableColumns"
                :actions="tableActions"
                :total="total"
                :page-index="pageIndex"
                :page-size="pageSize"
                :selection="true"
                @page-change="handlePagination"
                @action-click="handleTableAction"
                @selection-change="handleSelectionChange"
            >
            </custom-table>
        </div>

        <!-- 查看收货订单详情 -->
        <el-dialog title="收货订单详情" :visible.sync="dialogVisible" width="80%">
            <!-- <orderDetails v-if="dialogVisible" :id="orderId" @submit="orderSubmin" @close="dialogVisible = false"></orderDetails> -->
        </el-dialog>

        <!-- 支付操作 -->
        <el-dialog title="支付操作" :visible.sync="payForm.dialogVisible" width="500px">
            <div>
                <!-- <div>提示：当前已选中{{ payForm.ids.length }}个订单，共{{ payForm.amount }}元，请选择支付方式和支付金额</div> -->
                <el-alert
                    class="e-m-b-20"
                    :title="`提示：当前已选中${ payForm.ids.length }个待付订单，合共支付金额${ payForm.amount }元。`"
                    type="info">
                </el-alert>
                <el-form ref="ruleForm" :model="payForm" :rules="rules" label-width="80px">
                    <el-form-item label="支付方式" prop="payway">
                        <el-select v-model="payForm.payway" clearable placeholder="请选择">
                            <el-option
                                v-for="item in paywayList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="支付金额" prop="amount">
                        <el-input v-model="payForm.amount" type="number">
                            <span slot="suffix">元</span>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="支付凭证">
                        <el-upload
                            :action="fileUploadURL"
                            :headers="headers"
                            :limit="1"
                            list-type="picture-card"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove"
                            :on-success="handleFileSuccess">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="payForm.dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitPayment">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    // import orderDetails from "./details";

    export default {
        props: {
            storeId:{
                type: Number,
                default: 0
            }
        },
        components: { 
            // orderDetails
        },
        data(){
            return{
                loading: false,
                pageIndex: 1, //页码
                pageSize: 10, //每页显示条数
                total: 0, //总条数
                key: '', //搜索关键字
                dataType: 1, //查询类型  1:支出管理 2:收款管理
                /*
                    状态列表
                */
                stateList: [
                    {
                        value: 1,
                        name: '待支付'
                    },
                    {
                        value: 2,
                        name: '已支付'
                    },
                    {
                        value: 3,
                        name: '已取消'
                    }
                ],
                stateValue: 1, //选中的状态值
                timeType: 0, //筛选时间类别：0全部，1今日，2昨日，3本月，4上月，5本季度，6上季度，7本年，9自定义时间段
                timeValue: '', //选择自定义筛选时间
                startDate: '', //开始时间
                endDate: '', //结束时间
                dialogVisible: false, //订单详情弹窗
                staffId: "", //处理人id
                staffList: [], //处理人列表
                ListUnpaidData: [
                    // {
                    //     number: 'PY20021565165'
                    // }
                ], //单条按收货时间的列表数据
                tableColumns: [
                    { 
                        prop: 'number', 
                        label: '单号',
                        width: 'auto'
                    },
                    { 
                        prop: 'a', 
                        label: '用途', 
                        width: 120 
                    },
                    { 
                        prop: 'b', 
                        label: '来往方', 
                        width: 120 
                    },
                    { 
                        prop: 'c', 
                        label: '备注信息', 
                        width: 120 
                    },
                    { 
                        prop: 'd', 
                        label: '应付金额', 
                        width: 120 
                    },
                    { 
                        prop: 'e', 
                        label: '结算状态', 
                        width: 120 
                    },
                    { 
                        prop: 'f', 
                        label: '提交时间', 
                        width: 120 
                    },
                ],
                tableActions: [
                    { 
                        name: 'pay', 
                        label: '支付',
                        // visible: row => row.status !== 'deleted'
                    },
                ],
                // 支付操作
                payForm:{
                    dialogVisible: false,
                    ids: [],
                    payway: null,
                    amount: null,
                    picVoucher: ""
                },
                rules:{
                    payway: [
                        { required: true, message: '请选择支付方式', trigger: 'change' }
                    ],
                    amount: [
                        { required: true, message: '请输入支付金额', trigger: 'blur' },
                    ],
                },
                paywayList: [], //支付方式列表
            }
        },
        computed: {
			headers() {
				return this.$store.state.header
			}
		},
        watch:{
            dataType(key){
                switch (key) {
                    case key = 1:
                        // this.$router.push({
                        //     path:'/pending/wait'
                        // })
                        break;
                    case key = 2:
                        // this.$router.push({
                        //     path:'/pending/done'
                        // })
                        break;
                
                    default:
                        break;
                }
            },
            stateValue(){
                this.getList()
            },
            "payForm.dialogVisible"(val){
                if(!val){
                    this.payForm={
                        dialogVisible: false,
                        ids: [],
                        payway: null,
                        amount: null,
                        picVoucher: ""
                    }
                    if(this.$refs.ListUnpaidData) {this.$refs.ListUnpaidData.clearSelection();}
                }
            },
        },
        mounted() {
            // this.getUsersList()
            this.getAccountList()
            this.getList()
        },
        methods: {
            // 页码切换
            // pageChange(e) {
            //     this.pageIndex = e;
            //     this.getList()
            // },

            // // 页码大小切换
            // handleSizeChange(val) {
            //     this.pageIndex = 1;
            //     this.pageSize = val;
            //     this.getList()
            // },
            // 翻页操作处理
            handlePagination({ pageIndex, pageSize }) {
                this.pageIndex = pageIndex
                this.pageSize = pageSize
                this.getList(false) // 获取新数据
            },
            // 操作按钮点击事件
            handleTableAction({ action, row, event }) {
                switch(action) {
                    case 'view':
                        // this.goViewShow(event,row)
                    break
                }
            },
            // 选择自定义筛选时间
            changeTime(e){
                if(e && e.length > 0){
                    this.startDate = e[0]
                    this.endDate = e[1]
                    this.timeType = 9
                    this.getList()
                }else{
                    this.timeType = 0
                    this.startDate = ''
                    this.endDate = ''
                    this.getList()
                }
            },

            // 查看收货订单详情
            showDetails(id){
                this.orderId = id
                this.dialogVisible = true
            },

            //收货订单提交回调
            orderSubmin(){
                this.dialogVisible = false
                this.createDialogVisible = false
                this.getList()
            },

            // 获取处理人信息
            getUsersList(key){
                this.loading = true
                this.$axios.post('/Pack/Staff/List',{
                    "IsAll": true,
                    "PageIndex": 1,
                    "PageSize": 30,
                    "key": key
                }).then((res)=>{
                    let dataArr = [
                        {
                            name: '全部',
                            id: "",
                        }
                    ]
                    res.rows.forEach((item)=>{
                        dataArr.push(item)
                    })
                    this.staffList = dataArr
                }).finally(()=>{
                    this.loading = false
                })
            },

            // 获取数据
            getList(search = false){
                this.loading = true;
                if(search){
                    this.pageIndex = 1;
                }

                this.$axios.post('/Pack/Order/ListUnpaid',{
                    "PageIndex": this.pageIndex,
                    "PageSize": this.pageSize,
                    "key": this.key,
                    "timeType": this.timeType,
                    "startDate": this.startDate == '请选择时间'?'':this.startDate,
                    "endDate": this.endDate == '请选择时间'?'':this.endDate,
                    "orderState": 1,
                    // "userId": this.staffId
                }).then((res)=>{
                    this.ListUnpaidData = res.rows;
                    this.total = res.total
                }).finally(()=>{
                    this.loading = false;
                })
            },

            // 下载导出
            download() {
                this.$axios.post('/Pack/Order/DownloadUnpaid', {
                    "PageIndex": this.pageIndex,
                    "PageSize": this.pageSize,
                    "key": this.key,
                    "timeType": this.timeType,
                    "startDate": this.startDate == '请选择时间'?'':this.startDate,
                    "endDate": this.endDate == '请选择时间'?'':this.endDate,
                    "orderState": 1,
                }, {
                    responseType: 'blob'
                }).then(res => {
                    console.log(res)
                    let content = res;
                    let fileName = '同个客户合并的待付订单.xls'
                    this.utils.saveAndExport(content, fileName)
                })
            },

            // 获取支付类型列表
            getAccountList(){
				this.$axios.post('/Pack/BankAccount/List',{
					"PageIndex": 1,
					"PageSize": 999,
					"isAll": true
				}).then((res)=>{
					let datas = []
					res.rows.filter((item)=>item.usestate == '已启用').forEach((item)=>{
						datas.push({
							name: item.bankaccount,
							id: item.id
						})
					})
					this.paywayList = datas
				})
			},

            // 图片上传
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleFileSuccess(res, file) {
                console.log('handleFileSuccess',res,file)
				if (file.status === "success") {
                    this.form.picVoucher = res.datas.path;
					// this.form.proves.push({
					// 	savename: res.path,
					// 	name: file.name,
					// 	size: file.size,
					// 	res: file.url
					// });
				}
			},
            // 多选表格回调
            handleSelectionChange(val){
                this.payForm.ids = []
                this.payForm.amount = 0
                val.map((item)=>{
                    this.payForm.ids.push(item.id)
                    this.payForm.amount += item.amount
                })
                console.log('this.payForm.ids',this.payForm.ids)
            },
            // 发起支付
            startPayment(row){
                // 单条支付时
                if(row.id > 0){
                    this.$refs.ListUnpaidData.clearSelection()
                    this.payForm.ids.push(row.id)
                    this.payForm.amount = row.amount
                }

                // 多条支付时
                if(this.payForm.ids.length == 0){
                    this.$message.error('请选择订单');
                    return
                }
                this.payForm.dialogVisible = true
            },
            // 确认提交支付
            submitPayment(){
                if(this.payForm.payway == null){
                    this.$message.error('请选择支付类型');
                    return
                }
                if(this.payForm.amount == null){
                    this.$message.error('请输入金额');
                    return
                }
                // if(this.payForm.picVoucher == ''){
                //     this.$message.error('请上传凭证');
                //     return
                // }
                this.$axios.post('/Pack/Order/Payment',{
                    ids: this.payForm.ids,
                    payway: this.payForm.payway,
                    amount: this.payForm.amount,
                    picVoucher: this.payForm.picVoucher
                }).then((data)=>{
                    this.$message.success('提交成功');
                    this.payForm.dialogVisible = false;
                    this.getList(true)
                }).finally(()=>{
                    
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    
</style>